{include file="./public/header" title="带单信息"/}
<link rel="stylesheet" type="text/css" href="__STATIC__/lib/datatables/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/lib/datatables-buttons/css/buttons.dataTables.min.css"/>
<style>
    .selected {
        background-color: #F5F5F5;
    }
</style>

<body class="hold-transition skin-blue fixed sidebar-mini">
<div class="wrapper">

    {include file="./public/navi"/}

    <!--页面主体-->
    <div class="content-wrapper">
        <section class="content-header">
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 后台</a></li>
                <li>带单信息</li>
                <li class="active">编辑</li>
            </ol>
        </section>
        <section class="content">
            <div class="box box-primary collapsed-box">
                <div class="box-header with-border">
                    <div class="box-title">过滤条件</div>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                        </button>
                    </div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <form id="filter">
                        <div id="filter_col1" data-column="0">
                            <input class="hidden" id="col0_filter">
                        </div>
                        <div class="row-fluid">
                            <div id="filter_col2" data-column="1" class="form-group col-md-3">
                                <input type="text" class="column_filter form-control input-sm" id="col1_filter"
                                       placeholder="售卡品牌">
                            </div>

                            <div id="filter_col3" data-column="2" class="form-group col-md-3">
                                <input type="text" class="column_filter form-control input-sm" id="col2_filter"
                                       placeholder="售卡人">
                            </div>

                            <div id="filter_col4" data-column="3" class="form-group col-md-3">
                                <input type="text" class="column_filter form-control input-sm" id="col3_filter"
                                       placeholder="订购品牌">
                            </div>

                            <div id="filter_col5" data-column="4" class="form-group col-md-3">
                                <input type="text" class="column_filter form-control input-sm" id="col4_filter"
                                       placeholder="客户姓名">
                            </div>
                        </div>

                        <div class="row-fluid">
                            <div id="filter_col6" data-column="5" class="form-group col-md-3">
                                <input type="number" class="column_filter form-control input-sm" id="col5_filter"
                                       placeholder="单号">
                            </div>


                            <div id="filter_col7" data-column="6" class="form-group col-md-3">
                                <input type="number" class="column_filter form-control input-sm" id="col6_filter"
                                       placeholder="卡号">
                            </div>

                            <div id="filter_col8" data-column="7" class="form-group col-md-3">
                                <input type="date" class="column_filter form-control input-sm" id="col7_filter"
                                       placeholder="下单日期">
                            </div>

                            <div id="filter_col9" data-column="8" class="form-group col-md-3">
                                <input type="number" class="column_filter form-control input-sm" id="col8_filter"
                                       placeholder="金额">
                            </div>
                        </div>
                    </form>
                </div>
                <!-- /.box-body -->
            </div>

            <div class="box box-primary">
                <div class="box-header with-border">
                    <div class="box-title">带单信息</div>
                    <div class="box-tools">
                        <button onclick="javascript:location.reload();" type="button"
                                class="btn btn-box-tool"><i class="fa fa-refresh"></i> 刷新
                        </button>
                    </div>
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <table id="table" cellspacing="0" width="100%"
                           class="table table-condensed table-bordered table-hover">

                    </table>
                </div>
                <!-- /.panel-body -->
                <div class="box-footer">
                    <div class="pull-right">
                        <a id="buttons"></a>
                    </div>
                </div>
            </div>
            <!-- /.panel -->
        </section>
    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

{include file="public/js"/}
<script src="__STATIC__/lib/datatables/js/jquery.dataTables.min.js"></script>
<script src="__STATIC__/lib/datatables/js/dataTables.bootstrap.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/jszip.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="__STATIC__/lib/datatables-buttons/js/buttons.print.min.js"></script>

<script>
    //每列搜索
    function filterColumn(i) {
        $('#table').DataTable().column(i).search(
            $('#col' + i + '_filter').val()
        ).draw();
    }

    $(document).ready(function () {

        var table = $('#table').DataTable({
            "ajax": {
                "url": "listall.html",
                "dataSrc": "",
                "error": function () {
                    alert("服务器未正常响应，请重试");
                }
            },
            "pagingType": "numbers",
            "columns": [
                {"data": null, "title": "序号", "defaultContent": "", "sClass": "text-center", "bSortable": false},
                {"data": "brand", "title": "售卡品牌", "defaultContent": "", "sClass": "text-center"},
                {"data": "seller", "title": "售卡人", "defaultContent": ""},
                {"data": "brand2", "title": "订购品牌", "defaultContent": ""},
                {"data": "name", "title": "客户姓名", "defaultContent": ""},
                {"data": "oid", "title": "单号", "defaultContent": ""},
                {"data": "cid", "title": "卡号", "defaultContent": ""},
                {"data": "date", "title": "下单日期", "defaultContent": ""},
                {"data": "price", "title": "金额", "defaultContent": ""}
            ],
            dom: "<'row'<'col-md-6'l><'col-md-6'f>>" +
            "<'table-responsive't>B" +
            "<'row'<'col-md-6'i><'col-md-6'p>>",
            buttons: [
                {
                    extend: 'excel',
                    text: '导出',
                    header: true,
                    title: '带单信息'
                }
            ],

            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "search": "搜索:",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                }
            },

            "order": [[1, 'asc']]     //排序
        });

        table.buttons().container().appendTo('#buttons');

        table.on('order.dt search.dt',               //序号
            function () {
                table.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();

        //每列搜索
        $('input.column_filter').on('keyup click', function () {
            filterColumn($(this).parents('div').attr('data-column'));
        });

        //单行选择状态
        $('#table tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });
    });


</script>
</body>

</html>